<template>
    <a-form @keypress.enter="handleSearch">
        <div style="display: flex">
            <flexbox class="cell-item">
                <slot />
            </flexbox>

            <flexbox class="cell-item" v-for="item of fieldList.slice(0, showFieldMaxNum - 1)" :key="item.field">
                <h-search-select-cell
                    allowClear
                    :default-value="$filters.valToNameFilter('fromSystem', form.systemId)"
                    :style="{ width: item.width || '120px' }"
                    :placeholder="item.placeholder"
                    type="typeSystem"
                    label="systemName"
                    :searchQuery="{ systemType: systemType }"
                    @success="handleSelectChange"
                    v-if="item.formType === 'select'"
                />
                <h-year-picker-cell v-model:value="form[item.field]" v-if="item.formType === 'year'" />
                <flexbox v-if="item.formType === 'timelinessSelect'">
                    <div v-fitText>延期情况：</div>
                    <a-select v-model:value="form[item.field]">
                        <a-select-option :key="null" :value="null">全部</a-select-option>
                        <a-select-option key="1">正常</a-select-option>
                        <a-select-option key="2">延期</a-select-option>
                    </a-select>
                </flexbox>

                <flexbox v-if="item.formType === 'statusSelect'">
                    <div v-fitText>流程状态：</div>
                    <a-select v-model:value="form[item.field]">
                        <a-select-option :key="null" :value="null">全部</a-select-option>
                        <a-select-option key="2">进行中</a-select-option>
                        <a-select-option key="3">完成</a-select-option>
                    </a-select>
                </flexbox>

                <flexbox v-if="item.formType === 'date'">
                    <div v-fitText>{{ item.label }}：</div>
                    <h-range-picker-cell
                        :value="[
                            form[item.startTimeField] ? $moment(form[item.startTimeField], 'YYYY-MM-DD') : null,
                            form[item.endTimeField] ? $moment(form[item.endTimeField], 'YYYY-MM-DD') : null,
                        ]"
                        @change="rangeDateChange($event, item.field)"
                    />
                </flexbox>
            </flexbox>
            <flexbox>
                <HSuggestInput
                    class="cell-item"
                    allowClear
                    placeholder="请输入关键字"
                    v-model:value="searchKeyword"
                    style="max-width: 200px"
                    @change="handleSearch"
                />
            </flexbox>

            <a-button type="primary" @click="handleSearch">搜索</a-button>
            <a-button class="margin-l-8" @click="handleReset">重置</a-button>
        </div>
    </a-form>
</template>

<script lang="ts">
import store from '@/store';
import api from '@/api';
import { useSearchHistory } from '@/hooks/common/useSearchHistory';
import { HYearPickerCell, HSearchSelectCell, HRangePickerCell, HSuggestInput } from '@/components';
import { defineComponent, reactive, toRefs, watch } from 'vue';
export default defineComponent({
    components: {
        HYearPickerCell,
        HSearchSelectCell,
        HRangePickerCell,
        HSuggestInput
    },
    emits: ['search'],
    setup(_, { emit }) {
        const { saveHistory } = useSearchHistory();
        const state = reactive<any>({
            form: {
                systemId: null,
                onlineStatus: null,
                status: null,
                onlineRealTimeStart: null,
                onlineRealTimeEnd: null,
                versionName: ''
            },
            searchKeyword: '',
            systemType: '2',
            fieldList: [
                { field: 'systemId', title: '所属产品', placeholder: '请输入所属产品', formType: 'select', width: '160px' },
                { field: 'onlineStatus', title: '及时性', formType: 'timelinessSelect' },
                { field: 'status', title: '流程状态', formType: 'statusSelect' },
                {
                    field: 'onlineRealTime',
                    startTimeField: 'onlineRealTimeStart',
                    endTimeField: 'onlineRealTimeEnd',
                    label: '上线时间',
                    formType: 'date'
                }
            ],
            showFieldMaxNum: 5
        });
        // 重置搜索条件
        const handleReset = () => {
            state.form = {
                systemId: null,
                onlineStatus: null,
                status: null,
                onlineRealTimeStart: null,
                onlineRealTimeEnd: null,
                versionName: ''
            };
        };
        const handleSearch = () => {
            if (state.searchKeyword) {
                saveHistory(state.searchKeyword);
            }
            emit('search', {
                ...state.form,
                versionName: state.searchKeyword
            });
        };
        const handleSelectChange = (val) => {
            if (val) {
                state.form.systemId = val.id;
            } else {
                state.form.systemId = null;
            }
        };
        const rangeDateChange = (val, field) => {
            const { startTime, endTime } = val;
            state.form[`${field}Start`] = startTime;
            state.form[`${field}End`] = endTime;
        };
        watch(
            () => state.form,
            () => {
                handleSearch();
            },
            { deep: true }
        );
        // 默认赋值自己负责的产品
        const initSystem = async () => {
            // state.form.systemId = null;
            // console.log(store.getters.userInfo.userInfoDTO.rdRoleDTOS);
            // let roleList = store.getters.userInfo.userInfoDTO.rdRoleDTOS;
            // if (roleList && roleList.length) {
            //     // 筛选出自研的系统
            //     let roleListWithZiyanSys = roleList.filter((item) => item.systemType === '2');
            //     if (roleListWithZiyanSys.length) {
            //         let target = roleListWithZiyanSys.find((item) => item.name === '产品经理' && item.systemType === '2');
            //         if (target) {
            //             if (store.getters.dicOptions.mySystem && store.getters.dicOptions.mySystem.length) {
            //                 let systemTarget = store.getters.dicOptions.mySystem.find((item) => item.catalogCode === target.prodCode);
            //                 if (systemTarget) {
            //                     state.form.systemId = systemTarget.id;
            //                 }
            //             }
            //         }
            //     }
            // }
            if (store.getters.dicOptions.mySystem && store.getters.dicOptions.mySystem.length) {
                state.form.systemId = store.getters.dicOptions.mySystem[0].id;
            }
        };
        initSystem();
        return {
            ...toRefs(state),
            handleSearch,
            handleReset,
            handleSelectChange,
            rangeDateChange
        };
    }
});
</script>
<style scoped lang="less">
.cell-item {
    font-size: 14px;
    cursor: pointer;
    color: #344563;
    margin-right: 8px;
}
</style>